<template>
  <template v-for="item in menulist" :key="item.name">
    <el-menu-item
      :index="item.name"
      v-if="!item.children && item.name"
      @click="fnGotoMenu(item.path)"
    >
      <el-icon class="menuIcon"><setting /></el-icon>
      <span>{{ item.title }}</span>
    </el-menu-item>
    <el-menu-item
      :index="item.name"
      v-if="item.children && item.children.length == 1 && item.name"
      @click="fnGotoMenu(item.children[0].path)"
    >
      <el-icon class="menuIcon"><setting /></el-icon>
      <span>{{ item.title }} </span>
    </el-menu-item>
    <el-sub-menu :index="item.name" v-if="item.children && item.children.length > 1 && item.name">
      <template #title>
        <el-icon class="menuIcon"><location /></el-icon>
        <span>{{ item.title }}</span>
      </template>
      <AsideItem :menulist="item.children" />
    </el-sub-menu>
  </template>
</template>
<script setup lang="ts">
import AsideItem from "./aside-item.vue"
import { useRouter } from "vue-router"
const router = useRouter()
import type { PropType } from "vue"
interface MenuItem {
  path: string
  name: string
  meta: {
    title: string
  }
  children?: MenuItem[]
}
defineProps({
  menulist: {
    type: Array as any,
    default: () => []
  }
})
const fnGotoMenu = (path: string) => {
  router.push(path)
}
</script>
<style scoped lang="scss">
.menuIcon {
  font-size: 1em;
}
</style>
